<!--
 * @Author: 烟浮
 * @Date: 2022-06-24 01:39:14
 * @LastEditTime: 2022-06-26 01:12:36
 * @LastEditors: 锦墨涵秋 275740441@qq.com
 * @FilePath: /vite-ts-vue3/src/components/HelloWorld.vue
-->
<template>
  <div class="HelloWorld">{{ foo }}</div>
  <div class="HelloWorld">{{ mainStore.count }}</div>
  <div class="HelloWorld">{{ count }}</div>
  <div class="HelloWorld">{{ mainStore.arr }}</div>

  <div class="HelloWorld">{{ mainStore.count10 }}</div>
  <div class="HelloWorld">{{ mainStore.count10 }}</div>
  <div class="HelloWorld">{{ mainStore.count10 }}</div>
  <button @click="handleChangeState">修改state</button>
</template>
<script lang="ts" setup name="HelloWorld">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store";

const mainStore = useMainStore();
console.log(mainStore.count);

/**
 * @description: const { count } = mainStore;
 * @return {*} 上边这样结构出来的数据是有问题的，因为这样的数据不是响应式的，是一次性的
 * 解决办法如下：import { storeToRefs } from "pinia";
 * const { count } = storeToRefs(mainStore);
 * 把结构出来的数据做 ref 响应式代理 count.value 这样来取值
 */

const { count, foo } = storeToRefs(mainStore);
// console.log(count);

const handleChangeState = () => {
  /**
   * @description: 修改值：方式一：最简单的方式就是这样
   * mainStore.count++;
   */
  /**
   * @description: 修改值：方式二：如果需要修改多个数据，建议使用 $patch 批量更新
   * @return {*}
   */
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   foo: "hello",
  // });
  /**
   * @description: 方式三： $patch 一个函数，批量更新
   * @return {*}
   */
  // mainStore.$patch((state) => {
  //   state.count++;
  //   state.foo = "hello";
  //   state.arr.push(4);
  // });
  /**
   * @description: 方式四：逻辑比较多的时候可以封装到 actions 做处理
   */
  mainStore.changeState();
};
</script>
<style scoped lang="less"></style>
